/**
 * @file Button input插件
 * @module GMU
 * @import widget/button/button.js
 */
(function( gmu, $ ) {
    var uid = 0;

    /**
     * Button input插件，让button支持checkbox和radio来实例化。
     *
     * 如:
     * ```html
     * <input type="checkbox" data-label="按钮" />
     * <input type="radio" data-label="按钮" />
     * ```
     *
     * 且此类按钮，点击的时候回自动切换active状态，对应的input的checked值也会变化。
     *
     * @class input
     * @namespace Button
     * @pluginfor Button
     */
    gmu.Button.register( 'input', {
        _getWrap: function( $el ) {
            var id, el, $wrap,
                me = this,
                opts = me._options,
                inputType = me.getEl().attr("type");

            // 如果是表单元素。
            if ( $el.is( 'input[type="checkbox"], input[type="radio"]' ) ) {
                el = $el.addClass( 'ui-hidden' )[ 0 ];
                (id = el.id) || (el.id = id = 'input_btn_' + uid++);
                $wrap = $( 'label[for=' + id + ']', el.form || el.ownerDocument || undefined );
                $wrap.length || ($wrap = $( '<label for="' + id + '"></label>' ).insertBefore( $el ));

                $el.prop( 'checked' ) && (this._options.state = 'active');

                //自定义处理
                var labelStr = "<span class='ui-btn-text'>" + $el.attr("data-label") + "</span>";
                var labelClass = "ui-btn-" + inputType;
                var iconBoxClass = "ui-icon-" + inputType + "-box";
                var checkedClass = inputType === "checkbox" ? "ui-icon-check" : "ui-radio-check";

                //渲染控件表现层
                $wrap.addClass(labelClass + (opts.classList || ""))
                    .append("<span class='" + iconBoxClass + "'><span class='ui-icon " + checkedClass + "'></span></span>" + labelStr)
                    .find(".ui-icon").addClass(opts.iconClass || "");

                //如果控件默认是选中状态，同步选中状态
                if ($el.is(":checked")) {
                    $wrap.addClass("ui-state-active");
                }

                //由于radio不支持change事件，无法同步显示组件与控件的状态，所以统一改由checkbox实现
                if (inputType === "radio"){
                    $el.attr("type", "checkbox");
                }

                //注册checkbox的change事件，保持显示组件状态与实际控件值状态同步（radio不支持change事件）
                $el.change(function(){
                    $el.button("state", $el.is(":checked") ? "active" : "reset");
                })

                return $wrap;

            }

            return $el;
        },

        toggle: function() {
            var $el = this.$el;

            if ( $el.is( 'input[type="checkbox"], input[type="radio"]' ) ) {
                $radios = $( "[name='" + $el.attr('name') + "']", $el[ 0 ].form
                        || $el[ 0 ].ownerDocument || undefined );

                $("input[name='" + $el.attr('name') + "']:checked").click();
            }
            return this.origin.apply( this, arguments );
        },

        state: function( state ) {
            var $el = this.$el;

            // 设置disabled状态
            if ( $el.is( 'input[type="checkbox"], input[type="radio"]' ) ) {
                $el.prop( 'disabled', state === 'disabled' );
            }

            return this.origin.apply( this, arguments );
        }
    } );


    // dom ready
    $(function() {

        $( document.body ).on( 'click.button', 'label.ui-btn:not(.ui-state-disabled)', function() {
            $( '#' + this.getAttribute( 'for' ) ).button( 'toggle' );
        });

//        /**
//         * 把click事件换成tap事件，消除移动设备300毫秒延迟
//         */
//        $( document.body ).on( 'tap.button', 'label.ui-btn:not(.ui-state-disabled)', function() {
//            $( '#' + this.getAttribute( 'for' ) ).button( 'toggle' );
//        });

    });
})( gmu, gmu.$ );